<template>
  <div style="padding: 10px">

    <!--    功能区域-->
    <div style="margin: 10px 0">
      <div style="font-size: 60px;color: red"><p>{{seatNumber}}</p>
        <el-button type="primary" @click="SeeCart" >查看购物车</el-button>
      </div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="菜品" name="first">

          <!--    搜索区域-->
          <div style="margin: 10px 0">
            <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
            <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
            <span style="margin-left:20px;margin-right: 20px">选择种类</span>
            <el-select v-model="type_caipin"  clearable placeholder="请选择"  @change="choiceType_caiping">
              <el-option

                  v-for="item in typelist_caipin"
                  :key="item"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>





          </div>


          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" sortable></el-table-column>



            <el-table-column  label="菜品图片">

              <template #default="scope">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.cover"
                    :preview-src-list="[scope.row.cover]">
                </el-image>

              </template>
            </el-table-column>
            <el-table-column prop="goodsname" label="菜品名字"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="introduce" label="介绍"></el-table-column>


            <el-table-column fixed="right" label="操作" width="100">
              <template #default="scope">
                <el-button @click="addToCart(scope.row)" type="primary">加入购物车
                </el-button>
                <!--          <el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">-->
                <!--            <template #reference>-->
                <!--              <el-button type="text" style="color: crimson" >删除</el-button>-->
                <!--            </template>-->
                <!--          </el-popconfirm>-->

              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <div class="block">

              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
              >
              </el-pagination>
       </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="酒水" name="second">

          <!--    搜索区域-->
          <div style="margin: 10px 0">
            <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
            <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
            <span style="margin-left:20px;margin-right: 20px">选择种类</span>
            <el-select v-model="type_wine"  clearable placeholder="请选择"  @change="choiceType_wine">
              <el-option

                  v-for="item in typelist_wine"
                  :key="item"
                  :label="item"
                  :value="item"
              >
              </el-option>
            </el-select>




          </div>


          <el-table :data="tableData_wine" stripe style="width: 100%">
            <el-table-column prop="id" label="ID" sortable></el-table-column>



            <el-table-column  label="菜品图片">

              <template #default="scope">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.cover"
                    :preview-src-list="[scope.row.cover]">
                </el-image>

              </template>
            </el-table-column>
            <el-table-column prop="goodsname" label="菜品名字"></el-table-column>
            <el-table-column prop="price" label="价格"></el-table-column>
            <el-table-column prop="introduce" label="介绍"></el-table-column>


            <el-table-column fixed="right" label="操作" width="100">
              <template #default="scope">
                <el-button @click="addToCart(scope.row)" type="primary">加入购物车
                </el-button>
                <!--          <el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">-->
                <!--            <template #reference>-->
                <!--              <el-button type="text" style="color: crimson" >删除</el-button>-->
                <!--            </template>-->
                <!--          </el-popconfirm>-->

              </template>
            </el-table-column>
          </el-table>
          <div style="margin: 10px 0">
            <div class="block">

              <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="currentPage"
                  :page-sizes="[5, 10, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total_wine"
              >
              </el-pagination>
            </div>
          </div>
        </el-tab-pane>
<!--        <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>-->
<!--        <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>-->
      </el-tabs>
    </div>

    <el-dialog custom-class="add" title="提示" v-model="dialogVisible"
               width="30%" >
      <div style="margin-top: 10px">


        <div style="width:400px;margin-top: 10px" v-for="item,index in list">
          名称：{{item.goodsname}}
          单价：{{item.price}}
          数量：

          <span style="margin-left: 5px;margin-right: 5px">{{item.count}}</span>
          <!--              <el-button type="primary" @click="increase(index)">+</el-button>-->
          <el-button type="danger" @click="decrease(index)">删除</el-button>
        </div>

        <el-button style="margin-left: 15px;" type="primary" @click="order" ref="b">下单 总价：{{totalPrice}}元
        </el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'GoodsShow',

  components: {},
  data() {
    return {
      seatNumber:'',
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [],
      total_wine: 0,
      tableData_wine: [],
      goodsname:"",
      price:0,
      list:[],
      info:[],
      activeName:'first',
      typelist_caipin:[],
      typelist_wine:[]

    }
  },
  created(){
    this.load();
    request.get("/goodsType/selectTypelist").then(res=>{

      res.data.forEach(v=>[

        this.typelist_caipin.push(v.type)
      ])


    });
    request.get("/wineType/selectTypelist").then(res=>{

      res.data.forEach(v=>[

        this.typelist_wine.push(v.wineType)
      ])


    });

  },
  //计算属性
  computed:{
    totalPrice(){
      let sum = 0;
      this.list.forEach(v => {
        sum +=(v.price*v.count);

      })
      return sum;
    },



  },
  methods: {



    load(){

       let Number= sessionStorage.getItem("seatNumber")


      this.seatNumber =JSON.parse(Number)//转成字符串

      request.get("/goods/select",{
        params:{


          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}


      }).then(res =>{


        this.tableData = res.data.records
        this.total = res.data.total
      })

      request.get("/wine/select_available",{
        params:{

          days:5,
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}


      }).then(res =>{


        this.tableData_wine = res.data.records
        this.total_wine = res.data.total
      })
    },

    SeeCart(){
      this.dialogVisible=true

    },
    choiceType_caiping(){
      console.log(this.type_caipin)
      request.get("/goods/select",{
        params:{
          type:this.type_caipin,
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}
      }).then(res =>{


        this.tableData = res.data.records
        this.total = res.data.total
      })

    },
    choiceType_wine(){
      console.log(this.type_wine)
      request.get("/wine/select_available",{
        params:{
          days:5,
          type:this.type_wine,

          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}
      }).then(res =>{


        this.tableData_wine = res.data.records
        this.total_wine = res.data.total
      })

    },
    addToCart(row){
      console.log(row.category+"所选的内容")
      row.seatNumber=this.seatNumber

      this.info.push(row)





      this.list.push({

        goodsname:row.goodsname,
        price:row.price,
        count:1
      })


     this.$message.success("加入成功,请查看购物车")
},
    order(row){



      console.log(this.info)

      // request.post("/order/addcart",this.info).then()
      request.post("/order/buy" ,this.info,{
        params:{ money:this.totalPrice,

     seatid:sessionStorage.getItem("seatid")


        }


      }).then(res =>{
        this.dialogVisible=false
        window.open(res.data)})

      alert("下单成功，请完成支付")
      this.$router.push("/meal_situation_clerk" )





    },

    // increase(i){
    //   this.list[i].count++
    //
    //
    // },
    decrease(i){

      this.list[i].count--

      if(this.list[i].count<=0&&confirm("是否删除") ){

        this.info.splice(i,1)
        this.list.splice(i,1)
      }else {
        this.list[i].count++

      }



    },



    handleSizeChange( pageSize) { //改变页面显示信息个数
      this.pageSize = pageSize
      this.load()

    }, handleCurrentChange(pageNum) { //改变当前页
      this.currentPage = pageNum
      this.load()
    },


  }
}
</script>
